<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog custom-class="small-padding-dialog" :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible" :width="width" @close="handleClosed">
      <el-form :model="formData" ref="dutyForm" class="form-wrap" style="padding-top:0px;" :rules="rules">
        <el-form-item label="隔离点名称" prop="hotelName">
          <el-select v-if="type !== 'preview'" clearable v-model="formData.hotelName" placeholder="请选择隔离点">
            <el-option v-for="data in hotelDict" :key="data.hotelBaseInfoId" :label="data.hotelName" :value="data.hotelBaseInfoId" />
          </el-select>
          <span v-else>{{}}</span>
        </el-form-item>
        <el-form-item label="所属街道" prop="hotelStreet">
          <el-select v-if="type !== 'preview'" clearable v-model="formData.hotelStreet" placeholder="请选择所属街道">
            <el-option v-for="data in _getDict('hotel_street')" :key="data.value" :label="data.label" :value="data.value" />
          </el-select>
          <span v-else>{{formData.hotelStreet | dict("hotel_street")}}</span>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-if="type !== 'preview'" v-model="formData.name" placeholder="请输入" />
          <span v-else>{{formData.name}}</span>
        </el-form-item>
        <el-form-item label="证件号码" prop="cardId">
          <el-input v-if="type !== 'preview'" v-model="formData.cardId" placeholder="请输入" />
          <span v-else>{{formData.cardId}}</span>
        </el-form-item>
        <el-form-item label="联系方式" prop="telPhone">
          <el-input v-if="type !== 'preview'" v-model="formData.telPhone" placeholder="请输入" />
          <span v-else>{{formData.telPhone}}</span>
        </el-form-item>
        <el-form-item label="职务" prop="post">
          <el-input v-if="type !== 'preview'" v-model="formData.post" placeholder="请输入" />
          <span v-else>{{formData.post}}</span>
        </el-form-item>
        <el-form-item label="人员类型" prop="hotelStreet">
          <el-select v-if="type !== 'preview'" clearable v-model="formData.personType" placeholder="请选择人员类型">
            <el-option v-for="data in _getDict('person_type')" :key="data.value" :label="data.label" :value="data.value" />
          </el-select>
          <span v-else>{{formData.personType | dict("person_type")}}</span>
        </el-form-item>
        <el-form-item label="值班开始时间" prop="dutyStartTime">
          <el-date-picker v-if="type !== 'preview'" maxlength="30" v-model="formData.dutyStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
          <span v-else>{{formData.dutyStartTime}}</span>
        </el-form-item>
        <el-form-item label="值班结束时间" prop="dutyEndTime">
          <el-date-picker v-if="type !== 'preview'" maxlength="30" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="formData.dutyEndTime" type="datetime" />
          <span v-else>{{formData.dutyEndTime}}</span>
        </el-form-item>
        <el-form-item label="备注" prop="gltzqk" class="full">
          <el-input type="textarea" v-model="formData.gltzqk" v-if="type !== 'preview'"></el-input>
          <span v-else>{{formData.gltzqk}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button v-if="type !== 'preview'" type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getHotelList } from "~/admin/api/user";
import { addObj, getObj, putObj } from "@/views/yq-personnel/api/duty.js";
import { getDict } from "@/utils";
export default {
  name: "dutyDialog",
  inject: ["initList"],
  props: {
    // form表单数据
    title: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "50%",
    },
  },

  data () {
    return {
      //弹窗类型，默认新增
      type: "add",
      //选中的物业
      radioId: "",
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {},
      hotelDict: [],
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
      options: [],
      id: "",
    };
  },
  computed: {
    // 判断是否只读
    isReadonly () {
      return ["preview"].includes(this.type);
    },
  },
  created () {
    this._getHotelList(); //获取隔离点下拉;
  },
  methods: {
    _getHotelList () {
      // 获取隔离点下拉
      getHotelList().then((res) => {
        this.hotelDict = res.data.data;
      });
    },
    _getDict (type) {
      return getDict(type);
    },
    //开启弹窗
    async show ({ type, data = {} }) {
      //dutyInfoId
      this.type = type;
      this.id = data.dutyInfoId;
      this.dialogVisible = true;
    },
    // 提交新增
    async save () {
      this.$refs.dutyForm.validate((valid) => {
        if (valid) {
          addObj([this.formData]).then((res) => {
            console.log(res);
            this.$message.success("新增成功");
            for (const key in this.formData) {
              if (Object.hasOwnProperty.call(this.formData, key)) {
                this.formData[key] = "";
              }
            }
          })
        }
      });
    },
    _getFormData () {
      getObj(this.id).then((res) => {
        // 数据返显
        this.formData = res.data.data;
      });
    },
    // 弹窗关闭还原
    handleClosed () {
      this.$refs.dutyForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
